<template>
	<view class="main">
		<view class="hand">
			<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//dbleft.png" @click="blackbtn"></image>
		</view>
		<view class="show">
			<view class="sone">
				<view class="sonehand">
					{{list.projectName}}
				</view>
				<view class="sonefoot">
					<view class="sfleft">
						<view class="sflefttxt">
							创建时间：{{list.createTime}}
						</view>
						<view class="sflefttxt">
							项目地址：{{list.address}}
						</view>
						<view class="sflefttxt">
							小区总用户数：{{list.totalUser}}
						</view>
						<view class="sflefttxt">
							当前使用用户数：{{list.chargingUser}}
						</view>
						<view class="sflefttxt" v-if="isBan==0">
							分成比例：{{list.myProportion}}
						</view>
					</view>
					<view class="sfright">
						<view class="sfrightbtn" @click="detailbtn" v-if="list.isProportion==1">
							运营设置
						</view>
						<view class="sfrightbtn" @click="query_usersbtn" v-if="userSettings==1">
							注册用户
						</view>
						<!-- <view class="sfrightbtn" @click="delbtn" style="background-color: red;" v-show="list.isProportion==1&&blist.length==0">
							删除小区
						</view> -->
					</view>
				</view>
			</view>
			<view class="stwo">
				<van-cell v-for="(item, index) in blist" >
				<view class="stwolist" @click="sbtn(item.id,item.areaName,item.marks,item.areaType)">
					<view class="stwoleft">
						<view class="sfshang">
							<view class='sfson1'>{{item.areaName}}</view>
							<view class='sfson'>总数(台):{{item.equi.totalEqu}}</view>
						</view>
					
						<view class="stwoleftx">
							<span :class="item.equi.free>0?'kfour':''">空闲(个):{{item.equi.free}}</span><span :class="item.equi.busy>0?'ktwo':'kthree'" >
							占用(个):{{item.equi.busy}}</span> <span :class="item.equi.faults>0?'kone':'kthree'" >故障(个):{{item.equi.faults}}</span>  <span :class="item.equi.disconnects>0?'kone':'kthree'">离线(台):{{item.equi.disconnects}}</span>
							<span :class="item.equi.ban>0?'kone':'kthree'">禁用(个):{{item.equi.ban}}</span>
						</view>
					</view>
					<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//yright.png"></image>
				</view>
				
				</van-cell>
			</view>
			<view style="width: 100%;position: fixed;bottom: 40upx; pointer-events: none;" v-if="deviceSettings==1">
				<view class="sthree" @click="addbtn" >
					添加充电区
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		mounted() {
			
		},

		data() {
			return {
				projectId:"",
				list:{},//小区详情
				blist:[],//充电区列表
				loading: false,
				finished: false,
				refreshing: false,
				pageNum: 1, //页码
				pageSize: 15, //每页显示的条数
				deviceSettings:'',
				userSettings:'',
				typetwo:'',
				isBan:'',//权限
			}
		},
		onLoad(options) {
			this.isBan=uni.getStorageSync('user').isBan
			this.projectId=options.projectId
		},
		onShow() {
			this.typetwo=uni.getStorageSync('typetwo')
			this.main();
			this.qsbtn();
			if(this.typetwo==1){
				this.blist=[]
				this.onRefresh();
			}
			this.loadMore();
		},
		methods: {
			//获取某一小区详情和总用户数等信息
			main(){
				let data={
					projectId:this.projectId,
					needProjectMoney:0,
					needProportion:0
				}
				this.$base.request1('manager/project/statistics/', 'GET',data)
					.then(res => {
						this.list=res.data.data
					})
					.catch(err => {
				
					})
			},
			//获取权限
			qsbtn(){
				
				this.$base.request1('manager/power'+'/'+this.projectId, 'GET')
					.then(res => {
						if(res.data.code==200){
							this.deviceSettings=res.data.data.deviceSettings
							this.userSettings=res.data.data.userSettings
						}
					})
					.catch(err => {
				
					})
			},
			//返回上一页
			blackbtn() {
				uni.navigateBack()
			},
			//跳转运营设置
			detailbtn(){
				uni.setStorageSync('typetwo',0)
				if(this.list.isProportion=='0'){
					uni.showToast({
						title: "您不是该小区的运营商，没有权限进入。",
						duration: 2000,
						icon: "error"
					});
				}else if(this.list.isProportion=='1'){
					uni.navigateTo({
					       url: '/manager_pages/community_details/community_details?projectId='+this.projectId,
					});
				}
				 
			
			},
			//跳转添加充电区
			addbtn(){
				uni.setStorageSync('typetwo',0)
				 uni.navigateTo({
				        url: '/manager_pages/add_charging_area/add_charging_area?projectId='+this.projectId+'&addNew='+this.list.addNew,
				 });
			
			},
			//跳转设备清单
			sbtn(id,areaName,marks,areaType){
				console.log(id);
				uni.setStorageSync('typetwo',0)
				 uni.navigateTo({
				        url: '/manager_pages/equipment_list/equipment_list?projectId='+this.projectId+'&id='+id+'&isProportion='+this.list.isProportion+'&deviceSettings='+this.deviceSettings+'&areaName='+areaName+'&projectName='+this.list.projectName+'&marks='+marks+'&addNew='+this.list.addNew+'&areaType='+areaType,
				 });
			
			},
			//跳转注册用户
			query_usersbtn(){
				// this.$base.request1('manager/power'+'/'+this.projectId, 'GET')
				// 	.then(res => {
				// 		if(res.data.code==200){
				// 			if(res.data.data.userSettings=='1'){
				// 				uni.navigateTo({
				// 				       url: '/pages/query_users/query_users?projectId='+this.projectId,
				// 				});
				// 			}else{
				// 				this.$toast.fail('您暂无权限')
				// 				return
				// 			}
				// 		}else{
				// 			this.$toast.fail(res.data.msg)
				// 			return
				// 		}
						
				// 	})
				// 	.catch(err => {
				
				// 	})
				uni.setStorageSync('typetwo',0)
					uni.navigateTo({
					       url: '/manager_pages/query_users/query_users?projectId='+this.projectId,
					});
				
			},
			//删除小区
			delbtn(){
				this.$base.request1('manager/project'+'/'+this.projectId, 'DELETE')
					.then(res => {
						if(res.data.code==200){
							this.$toast.success('删除成功')
							this.blackbtn()
						}else{
							this.$toast.fail(res.data.msg)
							return
						}
						
					})
					.catch(err => {
				
					})
			},
			// 充电区列表分页
			loadMore() {
				
				if (this.refreshing) {
				  this.blist = [];
				  this.refreshing = false;
				}
				const that = this;
				let data = {
					pageNum:that.pageNum,
					pageSize:that.pageSize,
				}
				that.loading = true;
				that.$base.request1('manager/area/list'+'/'+this.projectId, 'GET', data)
					.then(res => {
						that.loading = false;
						if(res.data.rows&&res.data.rows.length>0){
							that.blist = that.blist.concat(res.data.rows);
							that.pageNum += 1;
						}else{
							that.finished = true;
						}
					})
					.catch(err => {
				
					})
			},
			 onRefresh() {
			      // 清空列表数据
			      this.finished = false;
				  this.pageNum=1
			      // 重新加载数据
			      // 将 loading 设置为 true，表示处于加载状态
			      this.loading = true;
			      this.loadMore();
			    },
			
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		/deep/.van-list__finished-text{
			margin-top: 100upx;
			padding-bottom: 200upx;
		}
		/deep/.van-hairline--top-bottom::after{
			border-width: 0;
		}
		.hand{
			width: 100%;
			background-color: #4B98ED;
			height: 62upx;
			font-size: 30upx;
			font-family: PingFang SC Bold, PingFang SC Bold-Bold;
			font-weight: 700;
			text-align: center;
			line-height: 62upx;
			color: #ffffff;
			position: relative;
			image{
				width:22upx;
				height: 39upx;
				position: absolute;
				left: 31upx;
				top: 11upx;
			}
		}
		.show{
			width: 100%;
			box-sizing: border-box;
			.sone{
				width: 100%;
				height: 250upx;
				background-color: #4b98ED;
				margin-bottom: 54upx;
				position: relative;
				.sonehand{
					font-size: 32upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					color: #ffffff;
					box-sizing: border-box;
					padding:20upx 32upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.sonefoot{
					position: absolute;
					width: 686upx;
					// height: 200upx;
					border-radius: 8upx;
					box-shadow: 0upx 2upx 9upx 0upx rgba(22,22,22,0.1); 
					background-color: #FFFFFF;
					left: 32upx;
					display: flex;
					box-sizing: border-box;
					justify-content: space-between;
	
					.sfleft{
						padding: 10upx 23upx;
						width: 500upx;
						.sflefttxt{
							font-size: 28upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #333333;
							line-height: 45upx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
					.sfright{
						box-sizing: border-box;
						padding-top: 19.5upx;
						.sfrightbtn{
							width: 141upx;
							height: 48upx;
							border-radius: 8upx 0upx 0upx 8upx;
							font-size: 24upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							text-align: center;
							line-height: 48upx;
							color: #ffffff;
							background-color: #4B98ED;
							margin-top: 4upx;
						}
					}
				}
			}
			.stwo{
				width: 100%;
				box-sizing: border-box;
				padding:31upx;
				/deep/.van-cell{
					padding: 0upx;
				}
				.stwolist{
					border-bottom: 1upx solid #d5d5d5;
					box-sizing: border-box;
					width: 100%;
					padding: 15upx 26upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.stwoleft{
						font-size: 28upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #333333;
						.sfshang{
							font-size: 28upx;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							color: #0b0b0b;
							display: flex;
							.sfson1{
								width: 400upx;
								text-overflow: ellipsis;
								white-space: nowrap;
								overflow: hidden;
							}
							.sfson{
								font-size: 24upx;
								font-family: PingFang SC Medium, PingFang SC Medium-Medium;
								font-weight: 500;
								color: #666666;
								width: 220upx;
								text-align: right;
							}
						}
					}
					.stwoleftx{
						font-size: 24upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						color: #666666;
						.kone{
							margin-left: 20upx;
							color: red;
						}
						.ktwo{
							margin-left: 20upx;
							color: #BC12ED;
						}
						.kthree{
							margin-left: 20upx;
							color: #666666;
						}
						.kfour{
							color: #39b55a;
						}
					}
					image{
						width: 13upx;
						height: 22upx;
					}
				}
			}
			.sthree{
				width: 238upx;
				height: 90upx;
				border-radius: 8upx;
				box-shadow: -1upx 6upx 9upx 0upx rgba(75,152,237,0.44); 
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				text-align: center;
				line-height: 88upx;
				margin: auto;
				color: #ffffff;
				background-color: #4B98ED;
				margin-top: 50upx;
				pointer-events: auto;
			}
		}
		
	}
</style>
